<template>
  <el-dialog :title="status=='edit'?'修改':'新增'" :visible.sync="dialogFormVisible" :close-on-click-modal="false">

    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px" style="width: 80%; margin-left:50px;" @keyup.enter.native="saveCoupon">
      <el-form-item label="名称" prop="name">
        <el-input v-model="temp.name" />
      </el-form-item>

      <div class="item-box">
        <el-form-item label="类型" prop="type">
          <el-select v-model="temp.type" placeholder="请选择优惠券类型">
            <el-option
              v-for="item in typeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="temp.type===2" label="商品名称" prop="contentId">
          <el-select v-model="temp.contentId" placeholder="请选择所属商品" filterable :filter-method="filterMethod">
            <el-option
              v-for="item in wareOption"
              :key="item.gid"
              :label="item.name"
              :value="item.gid"
            />
          </el-select>
        </el-form-item>
      </div>

      <el-form-item label="有效期" prop="day">
        <el-input v-model.number="temp.day" placeholder="请输入有效期" />
      </el-form-item>
      <el-form-item label="满减额度" prop="minTotal">
        <el-input v-model.number="temp.minTotal" placeholder="请输入满减额度" />
      </el-form-item>
      <el-form-item label="优惠额度" prop="discount">
        <el-input v-model.number="temp.discount" placeholder="请输入优惠额度" />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">
        取消
      </el-button>
      <el-button type="primary" @click="saveCoupon">
        确认
      </el-button>
    </div>

  </el-dialog>
</template>

<script>

// 总订单状态：1 全场满减 2 单品满减
const typeOption = [
  { value: 1, label: '全场满减' },
  { value: 2, label: '单品满减' }
]

import { searchWare, saveCoupon } from '@/api/coupon'
export default {
  props: {
    coupon: {
      type: Object,
      required: false,
      default() {
        return {
          gid: '',
          name: '',
          contentId: '',
          day: undefined,
          minTotal: undefined,
          discount: undefined,
          type: 1
        }
      }
    },
    status: {
      type: String,
      required: false,
      default() {
        return 'edit'
      }
    }
  },
  data() {
    return {
      typeOption,
      wareOption: [],
      ware: {
        label: '',
        value: ''
      },
      temp: {
        gid: '',
        name: '',
        contentId: '',
        day: undefined,
        minTotal: undefined,
        discount: undefined,
        type: undefined
      },
      rules: {
        name: {
          required: true,
          message: '名称不能为空',
          trigger: 'blur'
        },
        day: [
          {
            required: true,
            message: '有效期不能为空',
            trigger: 'blur'
          },
          {
            type: 'number',
            message: '请输入数字',
            trigger: 'blur'
          }
        ],
        minTotal: [
          {
            required: true,
            message: '满减额度不能为空',
            trigger: 'blur'
          },
          {
            type: 'number',
            message: '请输入数字',
            trigger: 'blur'
          }
        ],
        discount: [
          {
            required: true,
            message: '优惠额度不能为空',
            trigger: 'blur'
          },
          {
            type: 'number',
            message: '请输入数字',
            trigger: 'blur'
          }
        ],
        type: {
          required: true,
          message: '类型不能为空',
          trigger: 'change'
        }
      },
      dialogFormVisible: false,
      waresLodding: true
    }
  },
  watch: {
    dialogFormVisible() {
      if (this.dialogFormVisible) {
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
        this.temp = this.coupon
        if (this.temp.type === 2) {
          this.searchWare({ gid: this.temp.contentId })
        }
      } else {
        this.wareOption = []
      }
    }
  },
  methods: {
    searchWare(data) {
      data = data || {}
      searchWare(data).then(res => {
        this.wareOption = res.result
      })
    },
    filterMethod(data) {
      this.searchWare({ keyword: data })
    },

    saveCoupon() {
      if (this.temp.type === 1) {
        Object.assign(this.temp, { contentId: '' })
      }
      if (this.temp.minTotal <= this.temp.discount) {
        this.$message({
          message: '优惠金额要小于满减额~',
          type: 'error'
        })
        return false
      }
      saveCoupon(this.temp).then(res => {
        this.$message({
          type: 'success',
          message: '保存成功~'
        })
        this.dialogFormVisible = false
        this.$emit('updateValue')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .item-box{
    display: flex;
    align-items: center;
    .el-form-item {
      width: 50%;
    }
   .el-select{
      width: 100%;
    }
  }
</style>
